import React, { FC, ReactElement, ReactNode } from 'react';
import { Card, List, Empty } from '@douyinfe/semi-ui';
import {} from '@douyinfe/semi-icons';

import './index.scss';

export interface IMessageItem {
  title: ReactNode;
  content: ReactNode;
}

interface IProps {
  list: IMessageItem[];
}

const MessageList: FC<Partial<IProps>> = ({
  list = []
}) => {
  return (
    <Card className="message-list">
      <ul>
        {list.map((item, index) => (
          <li className="message-list-item" key={index}>
            <strong className="title">{item.title}</strong>
            <br />
            <pre className="content">{item.content}</pre>
          </li>
        ))}
      </ul>
      {!list?.length && (
        <List>
          <Empty
            // image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
            // darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
            title={'暂无信息'}
            description="消息列表暂无信息"
          />
        </List>
      )}
    </Card>
  );
}

export default MessageList;
